// 10、使用useContext获取父组件提供的状态
// 函数式组件传递数据
import React, {useState, createContext, useContext} from 'react';

// 创建上下文容器
let context = createContext();

function Son2({count,setCount}) {
    const arr = []
    const {car,setCar} = useContext(context)
    return (
        <div className='title'>
            <h2>son2</h2>
            <div>数量：{count}</div>
            <button onClick={()=>{setCount(++count)}}>数量++</button>
            <div>汽车名称：{car.name}，汽车颜色：{car.color}</div>
            <button onClick={()=>{setCar({name:'宝马',color:'黑色'})}}>更新汽车属性</button>
        </div>
    )
}

function Son1({count,setCount}) {
    return (
        <div className='title'>
            <h2>son1</h2>
            <Son2 count={count} setCount={setCount}></Son2>
        </div>
    )
}

function Ten(props) {
    let [count, setCount] = useState(5)
    let [car,setCar] = useState({
        name: '奔驰',
        color: '白色'
    })
    return (
        <context.Provider value={{car, setCar}}>
            <div className='title'>
                <h2>ten</h2>
                <div>数量：{count}</div>
                <div>汽车名称：{car.name}，汽车颜色：{car.color}</div>
                <Son1 count={count} setCount={setCount}></Son1>
            </div>
        </context.Provider>
    );
}

export default Ten;
